Tooltips
Static Tooltip
Four options are available: top, right, bottom, and left aligned.
Color
Five information situations are available: use the class primary,
success, warning, info,
danger .
Triggers Click
You can select the action that triggers the tooltip either by adding
the data-trigger="click" attribute or
by setting the trigger parameter via Javascript.
Animation
Apply two CSS style rotate and scale transition to the tooltip when you click the button.
Popover official website
Static Popover
Four options are available: top, right, bottom, and left aligned.
Popover Bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Popover Top
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Popover Right
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Popover Left
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Color
Five information situations are available: use the class primary,
success, warning, info,
danger .
Primary
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Success
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Info
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Warning
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Danger
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Triggers Click
You can select the action that triggers the popover either by adding
the data-trigger="focus / hover" attribute
or by setting the trigger parameter via Javascript.
Animation
Apply two CSS style rotate and scale transition to the popover when you click the button.
WebUI Popover official website
Auto Detect Placement
Auto detect the placement, always poped in page, can be contrained by horizontal or vertical
Pop With Animation
Set animation by data-attribute or code
Delayed show/hide
Control delay show/hide by data-attribute or code
Advanced examples
Table in popover, larget content, async mode, iframe mode